/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from 'react';
import { StyleSheet, View, Text, StatusBar, Dimensions, Alert } from 'react-native';
import BottomTabNav from './componments/BottomTabNav';
import Home from './pages/Home';
import More from './pages/More';
import Mine from './pages/Mine';
import Shop from './pages/Shop';
import Welcome from './pages/Welcome'

const source = require('./assets/source')

class Router extends Component {

  render() {
    let page = null
    let headnav = null
    let title = ['首页', '商家', '更多', '我的']
    var { height, width } = Dimensions.get('window')
    if (this.props.activePage == 1) {
      headnav = (
        <View style={styles.headView}>
          <Text style={styles.headViewText}>{title[this.props.activePage]}</Text>
        </View>
      )
      page = (<Shop></Shop>)
    } else if (this.props.activePage == 2) {
      headnav = (
        <View style={styles.headView}>
          <Text style={styles.headViewText}>{title[this.props.activePage]}</Text>
        </View>
      )
      page = (<More></More>)
    } else if (this.props.activePage == 3) {
      page = (<Mine actionChange={global.routerChangeAction}></Mine>)
    } else {
      headnav = (
        <View style={styles.headView}>
          <Text style={styles.headViewText}>{title[this.props.activePage]}</Text>
        </View>
      )
      page = (<Home></Home>)
    }

    return (
      <View style={styles.home}>
        <StatusBar backgroundColor='#555555'></StatusBar>
        {headnav}
        {page}
        <BottomTabNav style={styles.bottom} actionChange={global.routerChangeAction} index={this.props.activePage}></BottomTabNav>
      </View>
    );
  }
}

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = { activePage: 0, page: "welcome" };
    this.changeAction = this.changeAction.bind(this)
    this.changePage = this.changePage.bind(this)
    global.routerChangePage = this.changePage
    global.routerChangeAction = this.changeAction
  }
  render() {
    var pagelist = {
      welcome: Welcome,
      main: Router
    }
    var Page = pagelist[this.state.page]
    var props = {}
    for (let key in this.state) {
      props[key] = this.state[key]
    }
    props.changeAction = this.changeAction
    props.changePage = this.changePage
    return React.createElement(Page, props)
  }
  changeAction(index) {
    this.setState({
      page: 'main',
      activePage: index
    })
  }
  changePage(pagename) {
    this.setState({
      page: pagename
    })
  }
}



const styles = StyleSheet.create({
  home: {
    flex: 1,
    flexDirection: 'column',
  },
  headView: {
    flexDirection: 'row',
    backgroundColor: source.maincolor,
    justifyContent: 'center',
    alignItems: 'center',
    height: 50,
  },
  headViewText: {
    textAlign: 'center',
    fontSize: 25,
    color: '#ffffff',
    fontWeight: 'bold'
  },
  bottom: {
    bottom: 0
  },
  contion: {
    flex: 1,
    flexDirection: 'column'
  }
});
